<!DOCTYPE html>
<html style="background: #f7f7f7;">
<head lang="en">
    <meta charset="UTF-8">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>首页</title>
    <link rel="stylesheet" href="/style/wei/css/swiper.min.css">
    <link rel="stylesheet" href="/style/css/style1.css">
    <link rel="stylesheet" type="text/css" href="/style/rcm/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/style/rcm/css/xshop.css?ver=2019081211"/>
    <script src="/style/js/index/style.js"></script>
    <script src="/style/js/hhSwipe.js"></script>
    <script src="/style/js/index/swiper.min.js"></script>

    <script src="style/wei/js/jquery.min.js"></script>
    <script type="text/javascript" src="/style/new/js/jquery.lazyload.js"></script>
    <script type="text/javascript" src="/style/wei/js/jquery.cookies.js"></script>
    <style>
        .detail_twoBox{width:100%;position: relative;}
        .detail_ban{ position: relative; width: 100%; overflow: hidden;}
        .detail_two{position:relative;display: block;}
        .detail_two li{float: left;}
        .detail_two li a{display:block;width:100%;}
        .detail_two li img{ width:100%; display: block;}
        .num{position:absolute;left:0.68rem;bottom:0.35rem;z-index: 999;display: flex;align-items: center;}
        .num li{ display:inline-block;width:0.09rem;height:0.09rem;border-radius:50%;background:#fff;margin-right: 0.13rem;}
        .num .active{background-color:#8ed6ee;width: 0.18rem;height: 0.07rem;border-radius: 0.03rem;}

        .nostock{
            position: absolute;
            top: 0;
            z-index: 999;
            background: #fff;
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            color: #fff;
            border-radius: 2rem;
            background-color: rgba(235, 41, 148, 0.5)!important;
            filter: Alpha(opacity=50);
            background: #EB2994;
            text-align: center;
            font-size: .5rem;
            margin: 15% auto;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="s_top">
        <div class="scroll relative">
            <div class="index_box jz640">
                <div class="detail_twoBox">
                    <div class="detail_ban">
                        <ul class="detail_two clearfix">
                            <?php
                                if($this->data['advList1']){
                                    foreach($this->data['advList1'] as $r){
                                ?>
                            <li><a href="<?= $r['url']?>"><img src="<?= $r['pic']?>" alt='ban2'></a></li>
                             <?php
                                }
                            }
                             ?>
                        </ul>
                    </div>
                    <ul class="num"></ul>
                </div>
            </div>
            <div class="s_head">
                <a href="#" class="s_kf"><img src="/style/images/index/s_1.png" alt=""></a>
                <form id="forms" action="/index/goodslist" method="get">
                    <div class="s_search">
                        <img src="/style/images/index/s_3.png" alt="">
                        <input type="text" placeholder="请输入搜索关键词" name="keywords" id="forms">
                    </div>
                </form>
                <a href="#" class="s_lt"><img src="/style/images/index/s_2.png" alt=""></a>
            </div>
        </div>
        <div class="s_menu">
            <ul>
                <?php
                    if($this->data['advList5']){
                        foreach($this->data['advList5'] as $r){
                ?>
                <li>
                    <a href="<?= $r['url']?>"><img src="<?= $r['pic']?>" alt=""><span><?= $r['title']?></span></a>
                </li>
                    <?php
                     }
                }
                ?>
            </ul>
            <?php
            if($this->data['advList2']){

            ?>
            <a href="<?= $this->data['advList2']['url']?>" class="s_menuLink">
                <img src="<?= $this->data['advList2']['pic']?>" alt="">
            </a>

            <?php

                }
            ?>

            <dl>
                <?php
                    if($this->data['advList3']){
                    foreach($this->data['advList3'] as $r){
                ?>
                        <dt><a href="<?= $r['url']?>"><img src="<?= $r['pic']?>" alt=""></a></dt>

                <?php
                    }
                }
                ?>
                <?php
                    if($this->data['advList4']){
                    foreach($this->data['advList4'] as $r){
                ?>
                <dd><a href="<?= $r['url']?>"><img src="<?= $r['pic']?>" alt=""></a></dd>
                <?php
                     }
                }
                ?>
            </dl>
        </div>
    </div>
    <div class="s_main">
        <div id="top" class="top" style="width: 100%; top: 0px; position: relative; z-index: 999;">
            <div class="s_nav">
                <h4>今日特卖</h4>
                <h6>PREFERRED CUISINE</h6>
            </div>
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    <?php
                    if($this->data['special']){
                    foreach($this->data['special'] as $k=>$r){
                    ?>
                    <div class="swiper-slide <?=$k==0 ?'selected':''?> today-special" data-id="<?=$r['id']?>" onClick="special_goods(<?=$r['id']?>)"><i><?=$r['time']?></i><span><?=$r['status_name']?></span></div>
                <?php
                     }
                }
                    ?>
                </div>
            </div>
        </div>
            <!-- swiper2 -->
        <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-no-swiping">
                        <div class="s_view">
                            <ul class="s_list" id="goods_list">

                                <!--<li>
                                    <a href="#">
                                        <img src="/style/images/index/images/s_19.png" alt="">
                                        <div class="s_listA">
                                            <div class="s_listA_left">
                                                <h4>蜂花小麦蛋白护发素2瓶</h4>
                                                <h3>经典国货 尽享丝滑 增洗发水</h3>
                                            </div>
                                            <div class="s_listA_right">
                                                <h3><i>￥</i><em>39.9</em></h3>
                                                <h4>￥99.9</h4>
                                            </div>
                                        </div>
                                    </a>
                                </li>-->

                            </ul>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-no-swiping"></div>

                </div>
            </div>
    </div>
    <div class="foot-menu">
        <ul class="clearfix">
            <li class="on"><a href="/"><i class="ico-7"></i><span>首页</span></a></li>
            <li ><a href="/rcm"><i class="ico-1"></i><span>商城</span></a></li>
            <li><a href="/cart/cart"><i class="ico-5"></i><span>购物车</span></a></li>
            <li><a href="/college"><i class="ico-8"></i><span>商学院</span></a></li>
            <li><a href="/user/index"><i class="ico-4"></i><span>我的</span></a></li>
        </ul>
    </div>
    <!--<div class="s_footer">
        <ul>
            <li class="s_on"><a href="/"><img src="/style/images/index/1.png" alt=""><span>首页</span></a></li>
            <li><a href="/rcm"><img src="/style/images/index/02.png" alt=""><span>商城</span></a></li>
            <li><a href="/college"><img src="/style/images/index/03.png" alt=""><span>商学院</span></a></li>
            <li><a href="/cart/cart"><img src="/style/images/index/04.png" alt=""><span>购物车</span></a></li>
            <li><a href="/user/index"><img src="/style/images/index/05.png" alt=""><span>我的</span></a></li>
        </ul>
    </div>-->

    <script>
        $(function(){

            $('#forms').submit(function(){

            });



            var href=document.getElementsByTagName('a');
            for(var i=0;i<href.length;i++){
                href[i].ontouchend=function(){
                    window.location.href=this.getAttribute("href");
                }
            };
            var id = $(".today-special").eq(0).attr("data-id");
            special_goods(id);

            var detail_ban=$('.detail_two');
            var detail_ban_li=$('.detail_two li');
            var boxW=$(".detail_twoBox").width();

            var len=detail_ban_li.length+1;
            function startMove(){
                var i=0;
                var timer=null;
                detail_ban.css({width:len*boxW});//设置ban宽度
                detail_ban_li.css({width:100/len+"%"});//设置li宽度
                for (var j = 0; j < len-1; j++) {  //创建圆点
                    $('.num').append('<li></li>')
                }
                $('.num li').first().addClass('active'); //给第一个圆点添加样式

                var firstimg=detail_ban_li.first().clone(); //复制第一张图片
                detail_ban.append(firstimg); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
                //判断左右滑动切换
                detail_ban.on("touchstart", function(e) {
                    //                            e.preventDefault();
                    startX = e.originalEvent.changedTouches[0].pageX;
                    //                            e.stopPropagation();
                    return false;
                });
                detail_ban.on("touchend", function(e) {
                    //                            e.preventDefault();
                    //                            e.stopPropagation();
                    moveEndX = e.originalEvent.changedTouches[0].pageX,
                        X = moveEndX - startX;
                    if ( X > 0 ) {
                        clearInterval(timer);
                        i--;
                        if (i==-1) {
                            i=detail_ban_li.length-2;
                            detail_ban.css({left:-(len-1)*boxW});
                        }
                        detail_ban.stop().animate({left:-i*boxW},300);
                        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                    }
                    else if ( X < 0 ) {
                        clearInterval(timer);
                        i++;
                        if (i==len) {
                            i=1; //这里不是i=0
                            detail_ban.css({left:0}); //保证无缝轮播，设置left值
                        };
                        detail_ban.stop().animate({left:-i*boxW},300);
                        if (i==len-1) {   //设置小圆点指示
                            $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                        }else{
                            $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                        }
                    }
                    timer=setInterval(function(){
                        ss();
                    },3000);
                    return false;
                });
                //定时器自动播放
                timer=setInterval(function(){
                    autoMove();
                },2500);
                function autoMove(){
                    i++;
                    if (i==len) {
                        i=1;
                        detail_ban.css({left:0});
                    };
                    detail_ban.stop().animate({left:-i*boxW},300);
                    if (i==len-1) {
                        $('.num li').eq(0).addClass('active').siblings().removeClass('active');
                    }else{
                        $('.num li').eq(i).addClass('active').siblings().removeClass('active');
                    }
                }
            }
            //主要用于当调整浏览器窗口的大小时文档也相应调整
            $(window).resize(function() {
                boxW=$(".detail_twoBox").width();//获取改变后的窗口大小
                detail_ban.css({width:len*boxW});//设置ban外边框宽度
                detail_ban_li.css({width:100/len+"%"});//设置li宽度
            });
            startMove();//启动js
        })
        window.onload = function () {
            var pos =  $('#top').offset();// offset() 获得div1当前的位置，左上角坐标(x,y)
            $(window).scroll(function () { //滚动条滚动事件
                if ($(this).scrollTop() > pos.top ) {
                    $('#top').css('width', '100%').css('top', $(this).scrollTop() - pos.top);
                }
                else if ($(this).scrollTop() <=  pos.top ) {
                    $('#top').css('width', '100%').css('top',0).css('position', 'relative').css('z-index', '999');
                }
            })
        };
        $(function() {
            function setCurrentSlide(ele, index) {
                $(".swiper1 .swiper-slide").removeClass("selected");
                ele.addClass("selected");
                //swiper1.initialSlide=index;
            }

            var swiper1 = new Swiper('.swiper1', {
//					设置slider容器能够同时显示的slides数量(carousel模式)。
//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
                slidesPerView: 5.5,
                paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
                spaceBetween: 10,//slide之间的距离（单位px）。
                freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
                loop: false,//是否可循环
                onTab: function(swiper) {
                    var n = swiper1.clickedIndex;
                }
            });
            swiper1.slides.each(function(index, val) {
                var ele = $(this);
                ele.on("click", function() {
                    setCurrentSlide(ele, index);
                    swiper2.slideTo(index, 500, false);
                    //mySwiper.initialSlide=index;
                });
            });

/*            var swiper2 = new Swiper('.swiper2', {
                //freeModeSticky  设置为true 滑动会自动贴合
                direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
                loop: false,
//					effect : 'fade',//淡入
                //effect : 'cube',//方块
                //effect : 'coverflow',//3D流
//					effect : 'flip',//3D翻转
                autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
                onSlideChangeEnd: function(swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
                    var n = swiper.activeIndex;
                    setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                    swiper1.slideTo(n, 500, false);
                }
            });*/
        });



        function special_goods(id)
        {
            if(id){
                $.ajax({
                    url:'/test/ajaxSpecial',
                    type:'post',
                    data:{"id":id,"mr":Math.random()},
                    dataType:'json',
                    success:function(data){

                        var htmls = "";
                         //alert(JSON.stringify(data))
                        if(data != '' && data !=null){

                            $.each(data,function(index,value){

                                var number = "";
                                if(value.stock_number <1){

                                    number = '<div class="nostock">补货中</div>'
                                }

                                htmls += '<li><a href="/index/goodsdetail?goods_id='+value.goods_id+'"><img src="'+value.img+'" />';
                                htmls += '<div class="s_listA"><div class="s_listA_left"><h4>'+value.goods_name+'</h4>';
                                htmls += '<h3>'+value.goods_title+'</h3></div>';
                                htmls += '<div class="s_listA_right"><h3><i>￥</i><em>'+value.shop_price+'</em></h3><h4>￥'+value.market_price+'</h4></div></div></a>'+number+'</li>';
                            })

                            $('#goods_list').html(htmls);
                            /*$(".lazyimg").lazyload({
                                container:".in-mian4",
                                threshold : 150,
                                placeholder : "/style/new/images/lazyload_cover.gif",
                                failurelimit : 4
                            });*/

                        }else{

                            $('#goods_list').html("");
                        }



                    },
                    error:function(res){
                        console.log(res)
                    }
                })

            }

        }
    </script>

    <?php
    if($this->JSAPI){

        ?>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script>

            wx.config({
                appId: '<?=$this->JSAPI['appId'];?>',
                timestamp: '<?=$this->JSAPI['timestamp'];?>',
                nonceStr: '<?=$this->JSAPI['nonceStr'];?>',
                signature: '<?=$this->JSAPI['signature'];?>',
                jsApiList: [
                    'onMenuShareTimeline', //分享到朋友圈
                    'onMenuShareAppMessage' //分享给朋友
                ]
            });
            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    // alert(res);
                }
            });
            wx.ready(function () {
                wx.onMenuShareAppMessage({
                    title: '西海良品',
                    desc: '绿色富硒、好吃不贵的优质农产品，自用省钱、分享返钱，共建共享。社区连锁店 欢迎加盟.....',
                    link: '<?=$this->JSAPI['url'];?>',
                    imgUrl: 'http://<?=$_SERVER['HTTP_HOST'];?>/style/wei/images/tuijian/tj_logo_big2.jpg',
                    type: 'link',
                    dataUrl: '',
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });

                // 分享到朋友圈
                wx.onMenuShareTimeline({
                    title: '西海良品', // 分享标题
                    link: '<?=$this->JSAPI['url'];?>',
                    imgUrl: 'http://<?=$_SERVER['HTTP_HOST'];?>/style/wei/images/tuijian/tj_logo_big2.jpg',
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });

            });
        </script>
        <?
    }
    ?>
</body>
</html>